<template>
  <!--<div  class="light-cell-container" @click="cellAction">-->
  <div class="light-cell-container">
    <cell
      is-link
      v-bind:title="itemdata.name"
      :link="{name:'lightDetail',params:itemdata,query:{productId:itemdata.productId,deviceId:itemdata.deviceId}}"
    >
      <mt-switch
        v-model="isOn"
        onClick="event.cancelBubble = true"
        @change="turn"
      ></mt-switch>
    </cell>

  </div>
</template>
<script>
import store from "../../store/store";
import { getMYClient } from "../../js/client";
import { bus } from "../../js/client/bus";
export default {
  name: "lightcell",
  data() {
    return {
      isOn: true
    };
  },
  props: {
    itemdata: {
      type: Object
    }
  },
  mounted: function() {
    this.$api.device.deviceTopicList(this.itemdata.type).then(res => {
      // console.info(res.data.data);
      // this.COMMON.mqtt_subscribe(res.data.data[0].topic)
    });
    let that = this;
    bus.$on("msg", function(productId, deviceId, message, topic) {
      let data = new Uint8Array(message);
      if (data[0] == 0x00) {
        that.isOn = false;
      } else {
        that.isOn = true;
      }
      console.log(message + "哈哈哈哈哈哈啊哈哈哈");
    });
  },
  methods: {
    cellAction: function() {
      this.$router.push({
        name: "lightDetail",
        params: {
          id: "dsafadsreasdf"
        }
      });
    },
    onClick(newVal, oldVal) {
      alert("sss");
    },
    turn: function() {
      console.log(this.isOn);
    }
  },
  computed: {
    count() {
      return store.state.mqttMessage;
      // Or return basket.getters.fruitsCount
      // (depends on your design decisions).
    }
  },
  watch: {
    count(newCount, oldCount) {
      // Our fancy notification (2).
      console.log(`We have ${newCount} fruits now, yaay!`);
    }
  }
};
</script>

<style scoped>
.light-cell-container {
  /*width: 100%;*/
  /*background-color: #dfff02;*/
}
</style>
